<!DOCTYPE html>
<html>

<head>
	<style type="text/css">
		.screensaver{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.recordcards{
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 100%
		}
		
		.recordcard {
		    position: absolute ;
		    width: 7% ;
		    height: 10% ;
		    color: white ;
		}
		.recordphoto {
		    position: absolute ;
		    width: 100% ;
		    height: 100% ;
		    color: white ;
		    border-radius: 100%;
		}
		#btt{
			position: absolute;
		}
		.signcount {
		    position: absolute;
		    width: 30%;
		    height: 20%;
		    top: 70%;
		    left: 70%;
		    color: red;
		    font-size: 3vw;
		    font-family: 宋体;
		    font-weight: bold;
		    text-align: center;
		    overflow: visible;
		    background-color: blue;
		    z-index: 2000;
		}
	
		
	</style>

</head>

<body>
    <div id="blanket_container">
        <div class="screensaver"></div>
        <div class="cards"></div>
        <div class="recordcards"></div>
        <button id="btt">test</button>
        <div class="signcount">欢迎您,已签到1人</div>

    </div>
    
</body>

<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
	var recordhead = document.querySelector(".recordcards")
	var cicleR = 20;
	var circleAngle = 0;
	var circleculangle = 30;
	var count = 1;

	var getXYlocation = function (r, angle) {
	  var location = {
	      x:0,
	      y:0,
	  };
	  var whbi = $(window).height()/$(window).width();
	  var radian =  (2*Math.PI/360) * angle;
	  location.x = r * Math.cos(radian) + 50;
	  location.y = r * Math.sin(radian) + 50;
	  return location;
	};
	
	var genCard = function () {
		var card = $('<div>');
		card.addClass('recordcard');
		var head = $('<img>');
		head.addClass('recordphoto');
		head.attr('src','card2.png');

		card.append(head);




		var xylocation;
		if(cicleR <= 40){
			xylocation = getXYlocation(cicleR,circleAngle);
			console.log(count + "--"+cicleR+"--"+circleAngle);count++;
        
            if(circleAngle + circleculangle >= 360){
                circleAngle = 0;
                cicleR += 10;
            }else {
                if(cicleR <= 20){ 
                	circleculangle = 20;
                }else if(cicleR <= 30) {
                	circleculangle = 15;
	            }else if(cicleR <= 40){
	                circleculangle = 10;
	            }
	            circleAngle += circleculangle;
            }
        }else {
            cicleR = 20;
            circleAngle  = 0;
            xylocation = getXYlocation(cicleR,circleAngle);
            console.log(count + "--"+cicleR+"--"+circleAngle);count++;
            console.log('one circle');
            circleAngle += 20;
        }
        
        card.css('left',xylocation.x+'%').css('top',xylocation.y+'%');
        
		return card;
	}
	

	var remembercard = function () {
		if(recordhead.childNodes.length > 78){
			recordhead.removeChild(recordhead.childNodes[0]);
		}
	}
	

	$("#btt").click(function (argument) {
		// for (var i = 0; i < 78; i++) {
		// 	let card_temp = genCard();
		//     recordhead.appendChild(card_temp[0]);
		//     remembercard();
		    
		// }
		$(".signcount").text("欢迎您,已签到1人");

	});



</script>
</body>
</html>